<!--图片浏览-->
<template>
    <f7-page no-navbar style="background-color: #f4f5f5;">

        <!--照片相册-->
        <f7-photo-browser
                :photos="photos"
                theme="dark"
                ref="standaloneDark"
        ></f7-photo-browser>

        <div class="margin-top">
        <f7-row v-for="(item, index) in 9" :key="index">
            <f7-col style="width:33.33%" v-for="(item, index) in 3" :key="index">
                <div class="" style="text-align: center;">
                        <div>
                            <div>
                                <img class="photo-img" @click="$refs.standaloneDark.open()" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="90%" />
                            </div>
                            <!--<span>附近人</span>-->
                        </div>
                </div>
            </f7-col>

        </f7-row>
        </div>
    </f7-page>

</template>
<script>
    export default {
        data() {
            return {
                photos: [
                    {
                        url: 'img/beach.jpg',
                        caption: 'Amazing beach in Goa, India',
                    },
                    'http://placekitten.com/1024/1024',
                    'img/lock.jpg',
                    {
                        url: 'img/monkey.jpg',
                        caption: 'I met this monkey in Chinese mountains',
                    },
                    {
                        url: 'img/mountains.jpg',
                        caption: 'Beautiful mountains in Zhangjiajie, China',
                    },
                ],
            };
        },
        created() {
            // $refs.standaloneDark.open(3);
        }
    }
</script>
<style scoped>
    .photo-img {
        border: 3px solid white;
    }
</style>

